<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>


<p>Welcome to the chronoline.js demo page. chronoline.js is a
	library for making a chronology timeline out of events on a horizontal
	timescale. From a list of dates and events, it can generate a graphical
	representation of schedules, historical events, deadlines, and more.
	Below are 3 examples with events from the 2012 MLB Regular Season.</p>
<h2>Monthly Timeline</h2>
<p>This day-by-day timeline shows off a few features. The events are
	automatically stacked compactly when they overlap, whether over a
	single point or a range. Notice how the month labels stick to the edges
	when you scroll forward and past the first day of the month.</p>
<div id="target1" class="timeline-tgt">
	<input id="to-today" type="button" value="Go To Today" />
</div>
<h2>Quarterly Timeline</h2>
<p>Timelines can appear on different scales simply by plugging in
	one of a few existing defaults or by providing custom functions for it.
	Additionally, there are different options for how you want (or don't
	want) to highlight today on the timeline. If qtip is used, events also
	have tooltips.</p>
<p>This timeline also has dragging enabled, so click, hold, and drag
	to try that out.</p>
<div id="target2" class="timeline-tgt"></div>
<h2>Yearly Timeline</h2>
<p>Even at a very large scope, chronoline.js still functions. Events
	are stacked differently because there isn't enough space to place them
	adjacently anymore.</p>
<p>And if you didn't notice, the left and right arrows support both
	single clicks for discrete jumps and click-and-hold to scroll
	continuously.</p>
<div id="target3" class="timeline-tgt"></div>

<!-- FOOTER  -->


<script type="text/javascript">
	$(document).ready(
			function() {

				var events = [ {
					dates : [ new Date(2011, 2, 31) ],
					title : "2011 Season Opener",
					section : 0
				}, {
					dates : [ new Date(2012, 1, 29) ],
					title : "Spring Training Begins",
					section : 2
				}, {
					dates : [ new Date(2012, 3, 5) ],
					title : "Atlanta Braves @ New York Mets Game 1",
					section : 1
				}, {
					dates : [ new Date(2012, 3, 7) ],
					title : "Atlanta Braves @ New York Mets Game 2",
					section : 1
				}, {
					dates : [ new Date(2012, 3, 8) ],
					title : "Atlanta Braves @ New York Mets Game 3",
					section : 1
				}, {
					dates : [ new Date(2012, 3, 9), new Date(2012, 3, 11) ],
					title : "Atlanta Braves @ Houston Astros",
					section : 1
				}, {
					dates : [ new Date(2012, 3, 13), new Date(2012, 3, 15) ],
					title : "Milwaukee Brewers @ Atlanta Braves",
					section : 1
				}, {
					dates : [ new Date(2012, 3, 9), new Date(2012, 3, 11) ],
					title : "Boston Red Sox @ Toronto Blue Jays",
					section : 1
				}, {
					dates : [ new Date(2012, 3, 13), new Date(2012, 3, 15) ],
					title : "Baltimore Orioles @ Toronto Blue Jays",
					section : 1
				}, {
					dates : [ new Date(2012, 3, 17), new Date(2012, 3, 19) ],
					title : "Tampa Bay Rays @ Toronto Blue Jays",
					section : 1
				}, {
					dates : [ new Date(2012, 3, 20), new Date(2012, 3, 23) ],
					title : "Toronto Blue Jays @ Kansas City Royals",
					section : 1
				}, {
					dates : [ new Date(2012, 3, 5) ],
					title : "Opening Day for 12 Teams",
					section : 1
				}, {
					dates : [ new Date(2012, 2, 28) ],
					title : "Seattle Mariners v. Oakland A's",
					section : 1,
					description : "Played in Japan!"
				}, {
					dates : [ new Date(2012, 4, 18), new Date(2012, 5, 24) ],
					title : "Interleague Play",
					section : 1
				}, {
					dates : [ new Date(2012, 5, 10) ],
					title : "All-Star Game",
					section : 1
				}, {
					dates : [ new Date(2012, 9, 24) ],
					title : "World Series Begins",
					section : 3
				} ];

				var sections = [ {
					dates : [ new Date(2011, 2, 31), new Date(2011, 9, 28) ],
					title : "2011 MLB Season",
					section : 0,
					attrs : {
						fill : "#d4e3fd"
					}
				}, {
					dates : [ new Date(2012, 2, 28), new Date(2012, 9, 3) ],
					title : "2012 MLB Regular Season",
					section : 1,
					attrs : {
						fill : "#d4e3fd"
					}
				}, {
					dates : [ new Date(2012, 1, 29), new Date(2012, 3, 4) ],
					title : "Spring Training",
					section : 2,
					attrs : {
						fill : "#eaf0fa"
					}
				}, {
					dates : [ new Date(2012, 9, 4), new Date(2012, 9, 31) ],
					title : "2012 MLB Playoffs",
					section : 3,
					attrs : {
						fill : "#eaf0fa"
					}
				} ];

				var timeline1 = new Chronoline(document
						.getElementById("target1"), events, {
					animated : true,
					tooltips : true,
					defaultStartDate : new Date(2012, 3, 5),
					sections : sections,
					sectionLabelAttrs : {
						'fill' : '#997e3d',
						'font-weight' : 'bold'
					},
				});

				$('#to-today').click(function() {
					timeline1.goToToday();
				});

				var sections2 = [ {
					dates : [ new Date(2011, 2, 31), new Date(2011, 9, 28) ],
					title : "2011 MLB Season",
					section : 0,
					attrs : {
						fill : "##e3f0fe"
					}
				}, {
					dates : [ new Date(2012, 2, 28), new Date(2012, 9, 3) ],
					title : "2012 MLB Regular Season",
					section : 1,
					attrs : {
						fill : "#e3f0fe"
					}
				}, {
					dates : [ new Date(2012, 1, 29), new Date(2012, 3, 4) ],
					title : "Spring Training",
					section : 2,
					attrs : {
						fill : "#cce5ff"
					}
				}, {
					dates : [ new Date(2012, 9, 4), new Date(2012, 9, 31) ],
					title : "2012 MLB Playoffs",
					section : 3,
					attrs : {
						fill : "#cce5ff"
					}
				} ];

				var timeline2 = new Chronoline(document
						.getElementById("target2"), events, {
					visibleSpan : DAY_IN_MILLISECONDS * 91,
					animated : true,
					tooltips : true,
					defaultStartDate : new Date(2012, 3, 5),
					sections : sections2,
					sectionLabelAttrs : {
						'fill' : '#997e3d',
						'font-weight' : 'bold'
					},
					labelInterval : isFifthDay,
					hashInterval : isFifthDay,
					scrollLeft : prevMonth,
					scrollRight : nextMonth,
					markToday : 'labelBox',
					draggable : true
				});

				var timeline3 = new Chronoline(document
						.getElementById("target3"), events, {
					visibleSpan : DAY_IN_MILLISECONDS * 366,
					animated : true,
					tooltips : true,
					defaultStartDate : new Date(2012, 3, 5),
					sections : sections,
					sectionLabelAttrs : {
						'fill' : '#997e3d',
						'font-weight' : 'bold'
					},
					labelInterval : isHalfMonth,
					hashInterval : isHalfMonth,
					scrollLeft : prevQuarter,
					scrollRight : nextQuarter,
					floatingSubLabels : false,
					draggable : true
				});

			});
</script>

